<template>
	<div>
    <div class="container">
		<div class="handle-box">
			<label class="label" >用户名：</label>
			<el-input class="handle-input" v-model="form.branch_name"/>
			<label class="label" >时间范围：</label>
			<el-date-picker 
          style="width: 200px;"
         v-model="form.time" type="daterange"
            range-separator="到"
            ></el-date-picker>
				<el-button color="#1c84c6" class="handle-btn"  @click="handleSearch">查询</el-button>
				<el-row class="top-btn">
                    <el-input class="handle-input" v-model="form.branch_name" placeholder="搜索"/>
                    <el-button  @click="handleSearch">
                        <i class="iconfont icon-icon-refresh "></i>
                    </el-button>  
                    <el-tree-select
                                v-model="value"
                                :data="data"
                                multiple
                                node-key="id"
                                :default-checked-keys="[2,3]"
                                :render-after-expand="false"
                                show-checkbox
                                :suffix-icon="CaretBottom"
                            > 
                         <template #prefix>
                            <i class="iconfont icon-th3"></i>
                         </template>
                    </el-tree-select>                        
			</el-row>
			</div>
			<el-table ref="multipleTableRef" 
				:header-cell-style="{color:'#2A62BC'}"
			 	:data="tableData"   
			 	style="width: 100%;" 
			 	height="380"
                size="small"
                border
				@selection-change="handleSelectionChange">
                <el-table-column   type="selection" width="35" />
				<el-table-column  prop="Id" label="序号"  ></el-table-column>
				<el-table-column prop="LogThime" label="日志主题"></el-table-column>
                <el-table-column prop="IpAddress" label="IP地址"></el-table-column>
                <el-table-column prop="RequestAddress" label="请求地址"></el-table-column>
                <el-table-column prop="RequestType" label="请求方式"></el-table-column>
                <el-table-column prop="UserName" label="用户名"></el-table-column>
                <el-table-column prop="Type" label="类型"></el-table-column>
                <el-table-column prop="CountTime" label="操作时间"></el-table-column>	
			</el-table>
			<!-- 分页 -->
			<div class="pagination">
				<el-pagination
				:current-page="query.pageIndex"
					:page-size="query.pageSize"
					:page-sizes="[5, 10, 15, 20]"
					size="small"
					layout="total, sizes, prev, pager, next, jumper"
					:total="pageTotal"
					@size-change="handleSizeChange"
					@current-change="handlePageChange"/>
			</div>
	</div>
		<!-- </div> -->
	</div>
</template>

<script setup  >
import { ref, reactive } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { Delete, Edit, Search, Plus,CaretBottom } from '@element-plus/icons-vue';
import { getLogList} from '../../api/log' ;
const form = reactive({
    branch_name:'',
    time:'',
})
const value = ref()

const data = [
  {
    id:1,
    value: '序号',
    label: '序号',
  },
  {
    id:2,
    value: '日志主题',
    label: '日志主题',
  },
  {
    id:3,
    value: 'IP地址',
    label: 'IP地址',
  },
  {
    id:4,
    value: '请求地址',
    label: '请求地址',
  },
  {
    id:5,
    value: '请求方式',
    label: '请求方式',
  },
  
  {
    id:6,
    value: '用户名',
    label: '用户名',
  },
  
  {
    id:7,
    value: '类型',
    label: '类型',
  },
  {
    id:8,
    value: '操作时间',
    label: '操作时间',
  },
  
]

	
//分页字体
const small = ref(true)
// const size = ref<'default' | 'large' | 'small'>('default')


//分页数据
const query = reactive({
	pageIndex: 1,
	pageSize: 10,
});
//

//表格数据
const tableData = ref();
//总页数
const pageTotal = ref(0);
const multipleTableRef = ref()
const state = reactive({
	multipleSelection:[]
})

// 获取表格数据  分页是数据截取  后台结合一起后  直接返回分页的后的数据
const getData = () => {
    getLogList({pageCurrent:query.pageIndex,pageSize:query.pageSize}).then(res=>{
        console.log(res,"---res---")
        // tableData.value = res.data.
		let start  = (query.pageIndex-1)*query.pageSize;//开始位置
        let end =query.pageIndex*query.pageSize  ;//结束位置 数组的截取的时候 [start,end) suo所以不用-1
        tableData.value = res.data.slice(start,end);
        // tableData.value = res.data;
        pageTotal.value = res.data.length
    })
	
};
getData();
//多选框权限
const handleSelectionChange = (val) => {
  state.multipleSelection = val
}
// 分页导航
const handleSizeChange = (val) => {
  // console.log(`${val} items per page`)
  query.pageSize = val;
  getData()
}
const handlePageChange = (val) => {
	query.pageIndex = val;
	console.log(val,"==")
	console.log(query.pageSize)
	getData()
};


// 查询操作  to... 需要自己实现与后台交互
const handleSearch = () => {
	query.pageIndex = 1;
	getData();
};


</script >
<style lang="less" scoped>
.handle-box {
	margin-bottom: 20px;   
	.handle-btn{
		margin-left: 10px;
	}
}

.el-select {
	width: 200px;
	// margin-right: 10px;  
}

.handle-input {
	width: 200px;
    margin-right: 10px;
}
.label{
   display: inline-block;
   max-width:100%;
   margin: 5px;
   font-weight: 700; 
}
.top-btn{
	float: right;
	.el-button{
		margin-left: 5px;
	}
}
.right-btn{
 	justify-content:center;
	.el-button{
		height: 22px;
		// width: 60px;
		margin-right: 10px;
		padding: 1px 5px;
	}
}

.el-select{
        width: 50px;
        margin-left: 2px;
        margin-right: 20px;
        .el-input__inner{
            background-color: aquamarine;
        }
        
    }
    
</style>